<template>
	<view class="wrap">
		<view class="banner">
			<view class="search">

				<view class="info">
					<u-input placeholder="搜索你想要的好玩，这儿都有～" v-model="keyword" type="text" />
				</view>
				<view class="blur"></view>
				<div class="icon">
					<image @click="getSearchList" class="imgs"
						src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/8.png" mode=""></image>
				</div>
			</view>

		</view>
		<!-- 搜索道德内容 -->
		<view class="morePlay searchList" v-if="list2.length">
			<view class="item" v-for="(item,index) in list2">
				<image :src="item.images" mode="">
				</image>
				<view class="content">
					<view class="topTit">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.tip}}
					</view>
					<view class="cacu">
						<text class="txt1">{{item.sort_name}}</text> <text class="line"></text> <text
							class="txt2">{{item.virtually_num}}人已测</text>
					</view>
				</view>
				<view class="btns">
					<u-button type="success" shape="circle" :ripple="true" ripple-bg-color="#909399">立即测试</u-button>
				</view>
			</view>
		</view>
		<view v-else class="empty1">
			<u-empty style="width: 100%;" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png"
				v-if="!list2.length" text="暂无数据" mode="list"></u-empty>
		</view>

		<!-- 更多好玩 -->
		<view class="title" @click="qqshow=true">
			<image class="icon" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/9.png" mode="">
			</image>
			更多好玩
		</view>
		<view class="morePlay" v-if="list1.length">
			<view class="item" v-for="(item,index) in list1">
				<image :src="item.images" mode="">
				</image>
				<view class="content">
					<view class="topTit">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.tip}}
					</view>
					<view class="cacu">
						<text class="txt1">{{item.sort_name}}</text> <text class="line"></text> <text
							class="txt2">{{item.virtually_num}}人已测</text>
					</view>
				</view>
				<view class="btns">
					<u-button type="success" shape="circle" :ripple="true" ripple-bg-color="#909399">立即测试</u-button>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>

	

		<view v-else class="empty">
			<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate"
				text="暂无数据" mode="list"></u-empty>
		</view>

		<!-- 查看更多 -->
		<u-popup :mask-custom-style="bg" border-radius="29" v-model="qqshow" mode="center">
			<view style="padding-top: 51rpx;">
				<more @cancelFn="cancelFn" />
			</view>
			<image @click="qqshow=false" class="close"
				src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/25.png" mode=""></image>
		</u-popup>
		<!-- 结果 -->
		<u-popup :mask-custom-style="bg" border-radius="29" v-model="resultshow" mode="center">
			<view style="padding-top: 51rpx;">
				<answerres @cancelFn="cancelFn1" />
			</view>
			<image @click="resultshow=false" class="close"
				src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/25.png" mode=""></image>
		</u-popup>
	</view>

</template>
<script>
	import more from "@/components/pop/more.vue"
	import answerres from "@/components/pop/answerRes.vue"
	export default {
		components: {
			more,
			answerres
		},
		data() {
			return {
				list2: [],
				keyword:'',
				senDate2: false,
				bg: {
					background: 'rgba(0, 0, 0, 0.7)'
				},
				qqshow: false,
				resultshow: false,

				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],

			}
		},
		onLoad() {
			
			


			// 更多好玩
			this.get_more_assess()

		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.get_more_assess();

			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			
			// 获取搜索内容
			getSearchList(){
				this.senDate2 = false;
				this.$u.api.home.search_assess({
						appletId: this.vuex_appletId,
						page:1,
						size:200,
						keyword: this.keyword
					})
					.then((res) => {
						this.list2 = res.data.list
					});
				
			},
			
			//校验口令
			Fncheck_code() {

				if (this.types != '口令') {

					uni.navigateTo({
						url: "/subpackMain/home/search"
					})
				}


				if (this.keyword) {

					this.$u.api.home.check_code({
							appletId: this.vuex_appletId,
							code: this.keyword
						})
						.then((res) => {
							console.log(res.data.url, 5555);
							if (res.code == 200) {

								// 跳转
								uni.navigateTo({
									url: res.data.url
								})
							} else {
								this.$u.toast(res.msg)
							}

						});

				} else {
					this.$u.toast('请输入口令！')
				}

			},

			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.types = this.actionSheetList[index].text;
				if (this.types != '口令') {
					// 跳转
				}
			},

			// 更过必玩

			get_more_assess() {
				this.senDate = false;
				this.$u.api.home.more_assess({
						page: this.formData.page,
						size: this.formData.pageSize,
						appletId: this.vuex_appletId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);

							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},

			cancelFn1() {
				this.resultshow = false
			},
			cancelFn() {
				this.qqshow = false
			},


		}
	};
</script>
<style lang="scss">
	.empty1{
		/deep/ .u-icon__img{
			width: 750rpx!important;
			height: 368rpx !important;
			display: block !important;
			margin:-110rpx 0 0 !important;
		}
	}
	/deep/ .u-mode-center-box {
		background: none !important;
		// overflow: initial !important;
	}
	/deep/ .u-input__input{
		width: 56rpx;
		height: 39rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
		line-height: 33rpx;
	}

	.close {
		margin: 0 auto;
		width: 65rpx;
		height: 65rpx;
		display: block;
		z-index: 999;

	}

	.morePlay {
		margin: 0 24rpx;

		&.searchList {
			margin-top: -110rpx;
		}

		.item {
			margin-bottom: 24rpx;
			padding: 12rpx;
			background: rgba(45, 48, 85, 0.35);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 105rpx;
				height: 132rpx;
				border-radius: 10rpx;
				margin-right: 18rpx;
			}

			.content {
				flex: 1;

				.topTit {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					// line-height: 33rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;

				}

				.desc {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #65698D;
					// line-height: 23rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					margin: 6rpx 0;
				}

				.cacu {

					display: flex;
					align-items: center;

					.txt1 {
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #16AC51;
						line-height: 26rpx;
					}

					.line {
						height: 18rpx;
						width: 1rpx;
						display: inline-block;
						background: #373c53;
						margin: 0 16rpx;
					}

					.txt2 {
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #16AC51;
						line-height: 23px;
					}

				}
			}

			.btns {
				width: 167rpx;
				height: 61rpx;
				// background: #8CC950;

				margin-left: 8rpx;

				/deep/ .u-size-default {
					width: 167rpx;
					height: 61rpx !important;
					border-radius: 54rpx;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

			}
		}
	}



	.title {
		padding: 40rpx 0 20rpx 24rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang HK, PingFang HK;
		font-weight: 300;
		color: #FFFFFF;
		line-height: 35rpx;

		.icon {
			width: 21rpx;
			height: 21rpx;
			margin-right: 11rpx;
		}
	}

	.banner {
		position: relative;
		background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/search.png") no-repeat;
		width: 100%;
		height: 288rpx;
		background-size: 100% 100%;

		.blur {
			backdrop-filter: blur(8px);
			width: 330rpx;
			// border-radius: 0 0 80% 80%;
			height: 92rpx;
			position: absolute;
			right: 50rpx;
		}

		.search {
			text {
				z-index: 3;
				// position: relative;
			}

			padding-left: 48rpx;
			font-size: 28rpx;
			font-family: PingFang SC,
			PingFang SC;
			font-weight: 300;

			display: flex;
			align-items: center;
			position: absolute;
			left: 50%;
			margin-left: -351rpx;
			top:46rpx;
			width: 702rpx;
			height: 92rpx;
			background: rgba(255, 255, 255, 0.06);
			border-radius: 53px 53px 53px 53px;
			opacity: 1;

			.info {
				position: relative;
				z-index: 5;
				flex: 1;
				color: #FFFFFF;
				margin-right: 92rpx;
			}

			.icon {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 3;
				width: 92rpx;
				height: 92rpx;
				background: #8CC950;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.imgs {
					width: 51rpx;
					height: 51rpx;
				}
			}
		}
	}
</style>
